<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.js"></script>
  <script src="js/china.js"></script>
</head>
<body>
<div id="box2-1-1" style="width: 873px; height: 400px"></div>
</body>

<script>
  var box3_1=echarts.init(document.getElementById("box3-1"));
  var xdata_1=["1970年","1971年","1972年","1973年","1974年","1975年","1976年","1977年","1978年", "1979年", "1980年", "1981年", "1982年", "1983年", "1984年", "1985年", "1986年", "1987年", "1988年", "1989年", "1990年", "1991年", "1992年", "1993年", "1994年", "1995年", "1996年", "1997年", "1998年", "1999年", "2000年", "2001年", "2002年", "2003年", "2004年", "2005年", "2006年", "2007年", "2008年", "2009年", "2010年", "2011年", "2012年", "2013年", "2014年", "2015年", "2016年", "2017年", "2018年", "2019年", "2020年", "2021年", "2022年"]
  var KSMC_1=[2011.91, 2069.91, 1984.01, 2186.73, 2275.41, 2350.16, 2371.19, 2348.21, 2527.34, 2784.74, 2734.31, 2827.3, 3124.38, 3395.74, 3608.18, 3483, 3529.28, 3637.45, 3578.57, 3632.19, 3932.84, 3875.69, 4003.79, 4130.79, 4063.23, 4239.65, 4482.85, 4376.6, 4502.21, 4492.59, 4261.15, 4266.94, 4399.4, 4332.5, 4620.49, 4641.63, 4745.17, 4756.09, 4968.57, 4892.37, 5005.69, 5208.81, 5353.12, 5439.53, 5445.89, 5553.02, 5539.17, 5607.36, 5621.17, 5719.65, 5733.51, 5805, 5801.7,]
  var option_1= {
    title: {
      text: '1970-2022年农作物单位面积产量',
      textStyle:{
        fontSize: 15,
        color:"#FFF"
      },
      left:"6%",
      top:5,
    },
    backgroundColor: "rgb(43, 51, 59)",
    color: ['#3398DB'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '2%',
      right: '2%',
      bottom: '50%',
      containLabel: true
    },
    yAxis: [
      {
        type: 'value',
        axisLabel:{
          show: false,
        },
        splitLine:{show: false},
      }
    ],
    dataZoom: [//滑动条
      {
        xAxisIndex: 0,
        show: false,
        type: 'slider',
        startValue: 0,
        endValue: 3,
      }
    ],
    xAxis: [
      {
        type: 'category',
        inverse:false, //是否是反向坐标轴
        data: xdata_1,
        axisLabel:{
          margin: 15,
          color:"#FFF"
        },
        axisLine:{
          show:false,
        },
        axisTick: {
          show: false
        },

      }
    ],
    series: [
      {
        name: '1',
        type: 'bar',
        barWidth: 40,
        data: KSMC_1,
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'inside',
              textStyle: {
                //数值样式
                color: '#FFF',
                fontSize: 12,
              },
            },
          },
        },
      },
      {
        name: '对美元汇率(美元=100元)',
        type: 'pictorialBar',
        symbolSize: [40, 20],
        symbolOffset:[0, -10],
        z: 12,
        symbolPosition: 'end',
        symbol: "diamond",
        itemStyle: {
          normal: {
            color: '#296e9c'
          }
        },
        data: KSMC_1,

      }, {
        name: '对美元汇率(美元=100元)',
        type: 'pictorialBar',
        symbolSize: [40, 20],
        symbolOffset: [0, 10],
        symbol: "diamond",
        z: 11,
        itemStyle: {
          normal: {
            color: '#3496d7'
          }
        },
        data: KSMC_1,
      },
    ]
  };
  box3_1.setOption(option_1);
  //通过定时器的方式刷新，改变statrValue，endValue
  var a_1=setInterval(function () {
    // 每次向后滚动一个，最后一个从头开始。
    if (option_1.dataZoom[0].endValue == KSMC_1.length ) {
      option_1.dataZoom[0].endValue = 3;
      option_1.dataZoom[0].startValue = 0;
    }
    else {
      option_1.dataZoom[0].endValue = option_1.dataZoom[0].endValue + 1;
      option_1.dataZoom[0].startValue = option_1.dataZoom[0].startValue + 1;
    }
    box3_1.setOption(option_1);
  }, 2000);
</script>
</html>